<template>
  <a-tabs
    v-if="panes.length !== 0"
    v-model="activeKey"
    size="small"
    hide-add
    type="editable-card"
    @edit="onEdit"
    @change="changePage"
  >
    <template v-for="(pane, index) in panes" :tab="pane.title">
      <a-tab-pane :key="pane.fullPath" :closable="pane.closable">
        <template #tab>
          <a-dropdown :trigger="['contextmenu']">
            <div style="display: inline-block">
              {{ pane.title }}
            </div>
            <template v-slot:overlay>
              <a-menu style="user-select: none">
                <!-- <a-menu-item @click="reloadPage(pane)" :disabled="activeKey !== pane.fullPath" key="1">
                  <a-icon type="reload" />
                  刷新
                </a-menu-item> -->
                <a-menu-item @click="removeTab(pane, index)" key="2" v-if="pane.closable != false">
                  <a-icon type="close"/>
                  关闭
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item @click="closeLeft(pane, index)" key="3">
                  <a-icon type="vertical-right"/>
                  关闭左侧
                </a-menu-item>
                <a-menu-item @click="closeRight(pane, index)" key="4">
                  <a-icon type="vertical-left"/>
                  关闭右侧
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item @click="closeOther(pane, index)" key="5">
                  <a-icon type="column-width"/>
                  关闭其他
                </a-menu-item>
                <a-menu-item @click="closeAll" key="6">
                  <a-icon type="minus"/>
                  关闭全部
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tab-pane>
    </template>
  </a-tabs>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'NavTags',
  data() {
    return {
      defaultPans: [
        {
          title: '工作台',
          key: '/dashboard/workplace',
          fullPath: '/dashboard/workplace',
          closable: false,
        },
      ],
      defaultPath: '/dashboard/workplace',
      activeKey: '',
    };
  },
  computed: {
    ...mapGetters([ 'panes', 'panesA' ]),
  },
  methods: {
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    changePage(key) {
      this.activeKey = key;
      this.$router.push({
        path: key,
      });
    },
    // 刷新页面
    // reloadPage(pane) {
    //   this.$emit('reload')
    // },
    remove(targetKey) {
      let arrt = JSON.parse(JSON.stringify(this.panes));
      let index = -1;
      arrt.forEach((pane, i) => {
        if (pane.key === targetKey) {
          index = i;
        }
      });
      if (index !== -1) {
        arrt.splice(index, 1);
        if (arrt.length === 0) {
          arrt = JSON.parse(JSON.stringify(this.defaultPans));
          this.$router.push({
            path: this.defaultPath,
          });
        }
        const prevItem = this.panes[index - 1];
        if (prevItem) {
          this.activeKey = prevItem.fullPath;
          this.$router.push({
            path: prevItem.fullPath,
          });
        }
        const nextItem = this.panes[index + 1];
        if (nextItem) {
          this.activeKey = nextItem.fullPath;
          this.$router.push({
            path: nextItem.fullPath,
          });
        }
      }
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    // 关闭当前
    removeTab(pane, index) {
      let arrt = JSON.parse(JSON.stringify(this.panes));
      // 判断如果当前是最后一个元素了,就跳转到工作台
      arrt.splice(index, 1);
      if (arrt.length === 0) {
        arrt = JSON.parse(JSON.stringify(this.defaultPans));
        this.$router.push({
          path: this.defaultPath,
        });
      }
      const prevItem = arrt[index - 1];
      if (prevItem) {
        this.activeKey = prevItem.fullPath;
        this.$router.push({
          path: prevItem.fullPath,
        });
      }
      const nextItem = arrt[index + 1];
      if (nextItem) {
        this.activeKey = nextItem.fullPath;
        this.$router.push({
          path: nextItem.fullPath,
        });
      }
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    // 关闭其他
    closeOther(pane, index) {
      let arrt = JSON.parse(JSON.stringify(this.panes));
      const delIndex = index + 1;
      // 删除其所有右侧元素
      arrt.splice(delIndex, arrt.length - delIndex);
      // 删除其所有左侧元素
      arrt.splice(1, index - 1);
      this.$router.push({
        path: pane.fullPath,
      });
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    // 关闭左侧
    closeLeft(pane, index) {
      let arrt = JSON.parse(JSON.stringify(this.panes));
      arrt.splice(1, index - 1);
      this.$router.push({
        path: pane.fullPath,
      });
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    // 关闭右侧
    closeRight(pane, index) {
      let arrt = JSON.parse(JSON.stringify(this.panes));
      const delIndex = index + 1;
      arrt.splice(delIndex, this.panes.length - delIndex);
      this.$router.push({
        path: pane.fullPath,
      });
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    // 关闭全部
    closeAll() {
      // 删除数组全部元素->数组置空
      let arrt = JSON.parse(JSON.stringify(this.defaultPans));
      this.$router.push({
        path: this.defaultPath,
      });
      this.$store.commit('setpanesUrl', arrt);
      this.clearKeepAlive();
    },
    //keepAlive缓存
    clearKeepAlive() {
      let x = [];
      this.panes.forEach((item) => {
        let name = item.fullPath.split('/');
        x.push(name[name.length - 1]);
      });
      if (x.length != 1) {
        x = [ ...x, ...[ 'BasicLayout', 'Layout' ] ];
      }
      this.$store.commit('setkeepAliveArr', x);
    },
  },
  watch: {
    panesA() {
      if (!this.panesA) {
        this.$store.commit('setpanes', true);
        this.closeAll();
      }
    },
    $route: {
      handler(val) {
        const title = val.meta.title;
        const fullPath = val.fullPath;
        const routerObj = Object.assign({
          title: title,
          fullPath: fullPath,
          key: fullPath,
        });
        let arrt = JSON.parse(JSON.stringify(this.panes));
        // 先判断标签路由中是否已经存在相同的,如果存在相同的跳转后不push
        let flag = true;
        arrt.forEach((item) => {
          if (item.fullPath === fullPath) {
            flag = false;
          }
        });
        if (flag) {
          arrt.push(routerObj);
        }
        this.$store.commit('setpanesUrl', arrt);
        this.activeKey = fullPath;
        this.clearKeepAlive();
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-tabs-nav-container {
  padding: 10px 0 0 20px;
  height: 40px !important;
  line-height: 28px !important;
  font-size: 12px;
  background: var(--nav-tag-background);
}

/deep/ .ant-tabs-tab {
  height: 30px !important;
  line-height: 28px !important;
  font-size: 12px;
}

/deep/ .ant-tabs-tab {
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
  border-right: 1px solid var(--nav-tag-font-color);
  background: var(--top-nav-background) !important;
  font-weight: normal !important;
}

/deep/ .ant-dropdown-trigger {
  color: var(--nav-tag-font-color) !important;
}

/deep/ .ant-tabs-tab-active {
  background: var(--nav-tag-background-active) !important;
}
</style>